<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<title>上传头像</title>
		<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/updateicon2.css" />
		
	</head>
	<body>
		<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打开</button><br />
		<div class="user-photo-box">
			<img id="user-photo" src="">
		</div>
		</div>
		<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title text-primary">
							<i class="fa fa-pencil"></i>
							更换头像
						</h4>
					</div>
					<div class="modal-body">
						<p class="tip-info text-center">
							未选择图片
						</p>
						<div class="img-container hidden">
							<img src="" alt="" id="photo">
						</div>
						<div class="img-preview-box hidden">
							<hr>
							<span>150*150:</span>
							<div class="img-preview img-preview-lg">
							</div>
							<span>100*100:</span>
							<div class="img-preview img-preview-md">
							</div>
							<span>30*30:</span>
							<div class="img-preview img-preview-sm">
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<label class="btn btn-danger pull-left" for="photoInput">
							<input type="file" class="sr-only" id="photoInput" accept="image/*">
							<span>打开图片</span>
						</label>
						<button id="btn" class="btn btn-primary disabled" disabled="true">提交</button>
						<button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
					</div>
				</div>
			</div>
		</div>
		
		
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="js/updateicon2.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
